<template>
	<view class="content">
		<view class="c2c">
			<view class="select_nav">
				<view :class="type == 'add' ? 'active' : ''" @click="setType('add')">增加保证金</view>
				<view :class="type == 'duc' ? 'active' : ''" @click="setType('duc')">减少保证金</view>
			</view>
			<view class="top">
				<view class="one">
					<view>
						<text class="gray">最多增加：</text>
						<text>0.000USDT</text>
					</view>
					<view>
						<text class="gray">追加后的强评价格为：</text>
						<text>0.000USDT</text>
					</view>
				</view>
				<view class="two">
					<text class="gray">追加后的杠杆倍数为：</text>
					<text>0.000 X</text>
				</view>
			</view>
			<view class="btm">
				<view class="title">BTCUSDT永续多头方向</view>
				<view class="titles">0.00 X</view>
				<view class="sel">
					<image :style="{left:left+'%',marginLeft:mleft+'upx'}" src="../../../static/contract/picker.png" mode=""></image>
					<view class="sel_bg" :style="{width:width+'%'}"></view>
					<view class="per" @click="percentage(0)"></view>
					<view class="per" @click="percentage(25)"></view>
					<view class="per" @click="percentage(50)"></view>
					<view class="per" @click="percentage(75)"></view>
					<view class="per" @click="percentage(100)"></view>
				</view>
				<view class="num">
					<text>0</text>
					<text class="ff">25</text>
					<text class="ff">50</text>
					<text class="ff">75</text>
					<text>100</text>
				</view>
			</view>
			<view class="btn">确认</view>
			<view class="sm_title">杠杆倍数过低，账户中没有足够的可用保证金可以追加</view>
			<view class="ss_title" v-if="width>=50">
				当前杠杆倍数较高，请注意亏损风险
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icon/uni-icon.vue';
export default {
	components: { uniIcons },
	data() {
		return {
			width: 0,
			left: '0',
			mleft: '0',
			type: 'add',
		};
	},
	computed: {},
	onShow() {
	},
	methods: {
		//设置百分比
		percentage(number) {
			this.width = number;
			this.left = number;
			if(number==0) {
				this.mleft = 0;
			}else if(number==100) {
				this.mleft = -24;
			}else {
				this.mleft = -12;
			}
		},
		setType(type) {
			this.type = type
		},
	}
};
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
